<template>
  <div class="min-w-[1000px]">
    <!-- 列表头 -->
    <el-row class="h-[42px] bg-[#fafafb] leading-[42px] rounded-content-wrap">
      <el-col :span="10" class="min-w-40 pl-12">商铺名称</el-col>
      <el-col :span="3" class="max-w-20">面积</el-col>
      <el-col :span="3" class="max-w-20">租售类型</el-col>
      <el-col :span="3" class="max-w-20">价格</el-col>
      <el-col :span="3" class="max-w-20">更新时间</el-col>
      <el-col :span="2" class="max-w-16">是否展示</el-col>
    </el-row>

    <!-- 列表项 -->
    <Draggable v-if="selectDataList.length > 0" :list="selectDataList" @end="handleEnd">
      <el-row
        v-for="item in selectDataList"
        :key="item.id"
        class="h-[72px] leading-[72px] cursor-move"
      >
        <el-col :span="10" class="min-w-40 flex items-center">
          <div class="w-12 text-center text-[#E7E7E7] flex items-center justify-center">
            <i class="iconfont icon-caidansangehengxian text-2xl" />
          </div>
          <el-image
            class="rounded-[4px] w-[42px] h-[42px] flex-none mr-2"
            :src="getFirstImage(item)"
            fit="fill"
          ></el-image>
          <span>{{ item.data.name }}</span>
        </el-col>
        <el-col :span="3" class="max-w-20"> {{ item.data.area }} ㎡ </el-col>
        <el-col :span="3" class="max-w-20"> {{ item.data.rentOrSaleLabel }}</el-col>
        <el-col :span="3" class="max-w-20">
          <span v-if="item.data.rentOrSale === '1'">{{ item.data.rent }}元/平米*月</span>
          <span v-if="item.data.rentOrSale === '2'">{{ item.data.price }}元/平米</span>
        </el-col>
        <el-col :span="3" class="max-w-20">{{ item.updatedTime }} </el-col>
        <el-col :span="2" class="max-w-16">
          <el-checkbox :checked="true" @change="handleCheckedChange(item)"></el-checkbox>
        </el-col>
      </el-row>
    </Draggable>

    <el-empty v-else description="暂无数据">
      <div>
        <span>请前往</span>
        <el-button type="text" @click="$router.push('/admin/manage/carrier')">载体管理</el-button>
        <span>中添加载体</span>
      </div>
    </el-empty>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Draggable from 'vuedraggable'
import draggableMixin from '../common/draggableMixin'
export default Vue.extend({
  components: { Draggable },
  mixins: [
    draggableMixin({
      templateName: 'B_CONSOLE_SHOP',
      formKey: 'recommendShop',
    }),
  ],
  head: {
    title: '推荐商铺',
  },
})
</script>
